<template>
  <div class="nav-bar">
    <div class="nav-box">
      <div class="left-nav">
        <i
          class="el-icon-tickets rotate"
          @click="changeMenu"/>
        <h2>青岛星华智能装备有限公司</h2>
      </div>
      <div class="right-menu">
        <div class="screen-full-box">
          <el-tooltip
            content="全局按钮"
            effect="dark"
            placement="bottom">
            <screenfull class="screenfull right-menu-item"/>
          </el-tooltip>
        </div>
        <el-dropdown
          trigger="click"
          @command="handleCommand">
          <img
            class="head-img"
            src="@/assets/login/头.jpg"
            alt="头像">
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="setting">设置</el-dropdown-item>
            <el-dropdown-item command="info">个人信息</el-dropdown-item>
            <el-dropdown-item command="loginout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { StoreState } from '@/store'
import {mapState, mapMutations} from 'vuex'
import { CHANGE_MENU_STATE, LOGIN_OUT } from '@/store/mutation-types'
import Screenfull from './screenFull.vue'
export default Vue.extend({
  components: {
    Screenfull,
  },
  data () {
    return {
      number: 1,
    }
  },
  computed: {
    ...mapState({
      isCollapse: (state: StoreState) => state.menuInfo.isCollapse,
    }),
  },
  methods: {
    ...mapMutations({
      setChangeMenu: CHANGE_MENU_STATE,
    }) as {
      setChangeMenu(p: any): void
    },
    changeMenu () {
      this.setChangeMenu({key: 'isCollapse', value: !this.isCollapse})
    },
    handleCommand (command:any) {
      switch (command) {
        case 'setting':
          break
        case 'info':
          break
        case 'loginout':
          localStorage.setItem('token', '')
          this.$store.commit(LOGIN_OUT)
          this.$router.push({
            name: 'Login',
          })
          break
        default:
          break
      }
    },
  },
})
</script>

<style lang="scss" scoped>
.nav-bar {
  .nav-box {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 60px;
    border-bottom: 1px solid #eaeaea;
    background-color: #ffffff;
    .left-nav {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-content: center;
      align-items: center;
      .rotate {
        margin-left: 20px;
        margin-right: 10px;
      }
    }
    .right-menu {
      margin-top: 10px;
      height: 40px;
      display: flex;
      flex-direction: row;
      .screen-full-box {
        margin-right: 10px;
        margin-top: 3px;
      }
      .head-img {
        width: 40px;
        height: 40px;
        border-radius: 15px;
        border: 1px solid #eaeaea;
        margin-right: 30px;
      }
    }
  }
}
</style>
